<!--
 * @Description: 角色信息 - 主页面
 * @Author: DHL
 * @Date: 2022-03-30 13:50:53
 * @LastEditors: DHL
 * @LastEditTime: 2022-08-25 09:20:08
-->
<template>
  <div class="tw-role-wrapper">
    <splitpanes class="default-theme">
      <pane :size="20" class="role-left">
        <organizationTree
          ref="orgTreeRef"
          :draggable="false"
          @nodeClick="handleNodeClick"
          @search="handleNodeClick"
        ></organizationTree>
      </pane>
      <pane :size="80">
        <splitpanes class="default-theme">
          <pane :size="35">
            <div class="role-content">
              <div class="role-search">
                <el-row>
                  <el-col :span="2" style="text-align: center">
                    <el-checkbox
                      title="查询所有子级机构的角色"
                      v-model="searchForm.isAllChildNode"
                      @change="searchList"
                    ></el-checkbox>
                  </el-col>
                  <el-col :span="22">
                    <el-input
                      v-model="searchForm.queryLikeStr"
                      clearable
                      size="small"
                      placeholder="请输入关键字过滤"
                      autocomplete="off"
                      @change="searchList"
                    ></el-input>
                  </el-col>
                </el-row>
              </div>
              <div class="role-toolbar">
                <el-button-group>
                  <el-button size="small" @click="searchList">刷新</el-button>
                  <el-button size="small" v-auth="'ROLE-ADD'" @click="handleOpenForm('add')">
                    新增
                  </el-button>
                </el-button-group>
              </div>
              <div class="role-list">
                <el-table
                  ref="tableRef"
                  v-loading="loading"
                  :data="tableData"
                  height="calc(100% - 70px)"
                  border
                  highlight-current-row
                  @cell-click="handleRoleClick"
                >
                  <el-table-column type="index" width="40" />
                  <el-table-column prop="name" label="名称" />
                  <el-table-column prop="roleType" label="类别">
                    <template #default="scope">
                      <tw-dic-name dicKey="ROLE_TYPE" :dicValue="scope.row.roleType"></tw-dic-name>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="状态">
                    <template #default="scope">
                      <tw-dic-name dicKey="ROLE_STATE" :dicValue="scope.row.status"></tw-dic-name>
                    </template>
                  </el-table-column>
                  <el-table-column prop="action" label="操作" fixed="right" width="90">
                    <template #default="scope">
                      <el-button
                        link
                        type="warning"
                        v-auth="'ROLE-EDIT'"
                        @click="handleOpenForm('edit', scope.row)"
                      >
                        编辑
                      </el-button>

                      <el-button
                        link
                        type="danger"
                        v-auth="'ROLE-DEL-LOGIC-BATCH'"
                        @click="handleDelete(scope.row)"
                      >
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </pane>
          <pane :size="65">
            <div class="role-authorize">
              <el-tabs type="border-card" @tab-change="handleTabChange">
                <el-tab-pane label="经办权限" v-loading="handleResource.loading">
                  <el-empty v-if="!selectRole" description="请选择角色" />
                  <template v-else>
                    <el-alert
                      title="经办权限：登录系统后可操作的权限"
                      type="success"
                      :closable="false"
                    >
                    </el-alert>
                    <div class="authorize-toolbar">
                      <el-row>
                        <el-col :span="8">
                          <el-select
                            v-model="handleResource.projectId"
                            filterable
                            size="small"
                            placeholder="请选择项目"
                            @change="handleSearchAuthResourceTree"
                          >
                            <el-option
                              v-for="item in projectList"
                              :key="item.id"
                              :label="`${item.name}`"
                              :value="`${item.id}`"
                            />
                          </el-select>
                        </el-col>

                        <el-col :span="8">
                          <el-input
                            v-model="handleResource.keyWord"
                            size="small"
                            clearable
                            placeholder="请输入关键字过滤"
                            autocomplete="off"
                          ></el-input>
                        </el-col>

                        <el-col :span="8" style="text-align: right">
                          <el-button-group>
                            <el-button size="small" @click="handleExpandTree(true)">展开</el-button>
                            <el-button size="small" @click="handleExpandTree(false)"
                              >折叠</el-button
                            >
                            <el-button size="small" @click="handleSearchAuthResourceTree">
                              刷新
                            </el-button>
                            <el-button
                              size="small"
                              type="primary"
                              v-auth="'ROLE-ADD'"
                              @click="handleGrant"
                            >
                              授权
                            </el-button>
                          </el-button-group>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="resource-content">
                      <el-scrollbar height="100%">
                        <el-tree
                          ref="handleTreeRef"
                          node-key="id"
                          :data="handleResource.treeData"
                          :props="handleResource.treeProps"
                          empty-text="暂无数据"
                          :default-expanded-keys="handleResource.defaultExpandedKeys"
                          :default-checked-keys="handleResource.defaultCheckedKeys"
                          show-checkbox
                          check-on-click-node
                          highlight-current
                          :expand-on-click-node="false"
                          :filter-node-method="handleFilterTree"
                        >
                          <template #default="{ node, data }">
                            <span class="custom-tree-node">
                              <span class="tree-icon">
                                <svg-icon
                                  v-if="data.resType == '0'"
                                  iconClass="menu"
                                  color="#F56C6C"
                                ></svg-icon>
                                <svg-icon
                                  v-if="data.resType == '1'"
                                  iconClass="appStore"
                                  color="#409EFF"
                                ></svg-icon>
                              </span>
                              <span>{{ data.name }}</span>
                            </span>
                          </template>
                        </el-tree>
                      </el-scrollbar>
                    </div>
                  </template>
                </el-tab-pane>
                <el-tab-pane label="授权权限">
                  <el-empty v-if="!selectRole" description="请选择角色" />
                  <template v-else>
                    <el-alert
                      title="授权权限：可以再次授予其他角色的权限"
                      type="warning"
                      :closable="false"
                    >
                    </el-alert>
                    <div class="authorize-toolbar">
                      <el-row>
                        <el-col :span="8">
                          <el-select
                            v-model="accreditResource.projectId"
                            filterable
                            size="small"
                            placeholder="请选择项目"
                            @change="handleSearchAccreditResourceTree"
                          >
                            <el-option
                              v-for="item in projectList"
                              :key="`acc_pro_${item.id}`"
                              :label="`${item.name}`"
                              :value="`${item.id}`"
                            />
                          </el-select>
                        </el-col>

                        <el-col :span="8">
                          <el-input
                            v-model="accreditResource.keyWord"
                            size="small"
                            clearable
                            placeholder="请输入关键字过滤"
                            autocomplete="off"
                          ></el-input>
                        </el-col>

                        <el-col :span="8" style="text-align: right">
                          <el-button-group>
                            <el-button size="small" @click="accreditExpandTree(true)">
                              展开
                            </el-button>
                            <el-button size="small" @click="accreditExpandTree(false)">
                              折叠
                            </el-button>
                            <el-button size="small" @click="handleSearchAccreditResourceTree">
                              刷新
                            </el-button>
                            <el-button
                              size="small"
                              type="primary"
                              v-auth="'ROLE-ADD'"
                              @click="handleAccreditGrant"
                            >
                              授权
                            </el-button>
                          </el-button-group>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="resource-content">
                      <el-scrollbar height="100%">
                        <el-tree
                          ref="accreditTreeRef"
                          node-key="id"
                          :data="accreditResource.treeData"
                          :props="accreditResource.treeProps"
                          empty-text="暂无数据"
                          :default-expanded-keys="accreditResource.defaultExpandedKeys"
                          :default-checked-keys="accreditResource.defaultCheckedKeys"
                          show-checkbox
                          check-on-click-node
                          highlight-current
                          :expand-on-click-node="false"
                          :filter-node-method="accreditFilterTree"
                        >
                          <template #default="{ node, data }">
                            <span class="custom-tree-node">
                              <span class="tree-icon">
                                <svg-icon
                                  v-if="data.resType == '0'"
                                  iconClass="menu"
                                  color="#F56C6C"
                                ></svg-icon>
                                <svg-icon
                                  v-if="data.resType == '1'"
                                  iconClass="appStore"
                                  color="#409EFF"
                                ></svg-icon>
                              </span>
                              <span>{{ data.name }}</span>
                            </span>
                          </template>
                        </el-tree>
                      </el-scrollbar>
                    </div>
                  </template>
                </el-tab-pane>

                <el-tab-pane label="数据权限">
                  <el-empty v-if="!selectRole" description="请选择角色" />
                  <template v-else>
                    <div class="data-scope-wrapper">
                      <el-form label-width="100px">
                        <el-row>
                          <el-col :span="18">
                            <el-form-item label="数据权限类型">
                              <el-select
                                v-model="dataScope.dataScopeType"
                                clearable
                                placeholder="请选择数据权限类型"
                              >
                                <tw-dic dicKey="DATA_SCOPE_TYPE"></tw-dic>
                              </el-select>
                            </el-form-item>
                          </el-col>

                          <el-col :span="6" style="text-align: right">
                            <el-button
                              type="primary"
                              @click="handleSubmitDataScope"
                              v-loading="dataScope.loading"
                            >
                              提交
                            </el-button>
                          </el-col>
                        </el-row>
                      </el-form>
                    </div>

                    <template v-if="dataScope.dataScopeType === '7'">
                      <el-divider style="margin-top: 0px" content-position="left">
                        自定义数据
                      </el-divider>
                      <div class="data-scope-orgs-toolbar">
                        <el-row>
                          <el-col :span="18">
                            <el-input
                              v-model="dataScope.keyWord"
                              size="small"
                              clearable
                              placeholder="请输入关键字过滤"
                              autocomplete="off"
                            ></el-input>
                          </el-col>

                          <el-col :span="6" style="text-align: right">
                            <el-button-group>
                              <el-button size="small" @click="dataScopeOrgsExpandTree(true)">
                                展开
                              </el-button>
                              <el-button size="small" @click="dataScopeOrgsExpandTree(false)">
                                折叠
                              </el-button>
                              <el-button size="small" @click="handleSearchDataScopeOrgTree">
                                刷新
                              </el-button>
                            </el-button-group>
                          </el-col>
                        </el-row>
                      </div>

                      <div class="data-scope-orgs-wrapper">
                        <el-scrollbar height="100%">
                          <el-tree
                            ref="dataScopeOrgsTreeRef"
                            node-key="id"
                            :data="dataScope.orgTreeData"
                            :props="dataScope.treeProps"
                            empty-text="暂无数据"
                            :default-expanded-keys="dataScope.defaultExpandedKeys"
                            :default-checked-keys="dataScope.defaultCheckedKeys"
                            show-checkbox
                            check-on-click-node
                            highlight-current
                            :expand-on-click-node="false"
                            :filter-node-method="dataScopeOrgsFilterTree"
                          >
                          </el-tree>
                        </el-scrollbar>
                      </div>
                    </template>
                  </template>
                </el-tab-pane>

                <el-tab-pane label="用户" name="roleUser">
                  <el-empty v-if="!selectRole" description="请选择角色" />
                  <template v-else>
                    <div ref="userToolBarRef" class="user-wrapper">
                      <div class="user-search">
                        <el-row>
                          <el-col :span="8">
                            <el-input
                              v-model="roleUser.searchForm.loginName"
                              clearable
                              placeholder="请输入登陆名称"
                              @change="handleSearchUserTable"
                            ></el-input>
                          </el-col>
                          <el-col :span="8">
                            <el-input
                              v-model="roleUser.searchForm.name"
                              clearable
                              placeholder="请输入姓名"
                              @change="handleSearchUserTable"
                            ></el-input>
                          </el-col>

                          <el-col :span="8">
                            <el-select
                              v-model="roleUser.searchForm.status"
                              clearable
                              placeholder="请选择用户状态"
                              @change="handleSearchUserTable"
                            >
                              <tw-dic dicKey="USER_STATUS"></tw-dic>
                            </el-select>
                          </el-col>
                        </el-row>
                      </div>
                      <div class="user-btns">
                        <el-button class="item" type="primary" @click="handleShowSelectUser">
                          <svg-icon iconClass="plus"></svg-icon>
                          新增
                        </el-button>
                        <el-button
                          class="item"
                          type="danger"
                          :loading="roleUser.loadingByDel"
                          :disabled="isSelectUserRows"
                          @click="handleDeleteRoleUser()"
                        >
                          <svg-icon iconClass="delete"></svg-icon>
                          批量删除
                        </el-button>
                      </div>
                    </div>

                    <div class="user-table-wrapper" :style="roleUser.userTableStyle">
                      <!-- 数据表格 -->
                      <tw-table
                        ref="userTableRef"
                        :loading="roleUser.loading"
                        :options="roleUser.tableOptions"
                        :data="roleUser.tableData"
                        @search="searchUserList"
                      >
                        <template #userTableAction="{ row }">
                          <el-button link type="danger" @click="handleDeleteRoleUser(row)">
                            删除
                          </el-button>
                        </template>
                      </tw-table>
                    </div>
                  </template>
                </el-tab-pane>
              </el-tabs>
            </div>
          </pane>
        </splitpanes>
      </pane>
    </splitpanes>

    <roleForm ref="formRef" @refreshTableData="searchList"></roleForm>
    <roleSelectUser ref="roleSelectUserRef" @search="handleSearchUserTable"></roleSelectUser>
  </div>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss">
  .tw-role-wrapper {
    height: calc(100% - 20px);
    padding: 10px;
    background-color: #ffffff;

    .splitpanes__pane {
      background-color: #ffffff;
    }

    .role-left {
      padding-right: 10px;
    }

    .role-content {
      height: 100%;
      .role-search {
        padding: 0px 10px 5px 0px;
      }
      .role-toolbar {
        padding-right: 10px;
        text-align: right;
      }

      .role-list {
        height: 100%;
        padding: 5px 10px 0px 0px;
      }
    }

    .role-authorize {
      height: 100%;
      .el-tabs {
        height: calc(100% - 8px);

        :deep(.el-tabs__content) {
          height: calc(100% - 60px);
          padding: 10px;

          .el-tab-pane {
            height: 100%;
          }
        }
      }

      .authorize-toolbar {
        margin-top: 5px;

        .el-col {
          padding-right: 5px;
        }
        .el-select {
          width: 100%;
        }
      }

      .resource-content {
        height: calc(100% - 70px);
        margin-top: 5px;

        .custom-tree-node {
          font-size: var(--el-font-size-base);

          .tree-icon {
            margin: 0px 3px 0px 0px;
          }
        }
      }
    }

    .user-wrapper {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;

      .user-search {
        .el-col {
          padding: 0px 5px;
        }
      }

      .user-btns {
        .svg-icon {
          margin-right: 3px;
        }
      }
    }

    .data-scope-wrapper {
      width: 100%;

      .el-select {
        width: 100%;
      }
    }

    .data-scope-orgs-wrapper {
      height: calc(100% - 90px);

      .custom-tree-node {
        font-size: var(--el-font-size-base);

        .tree-icon {
          margin: 0px 3px 0px 0px;
        }
      }
    }
  }
</style>
